<template class='q'>
  <div class="login">
    <div class="bg">
    <div class="hh">欢迎登录</div>

    <van-form @submit="loginHandler">
      <van-cell-group inset>
        <van-field
          v-model="form.username"
          name="用户名"
          label="用户名"
          placeholder="用户名：admin1"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="form.password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码：123321"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          登录
        </van-button>
        <div @click="toRegister">
        <span>没有账号？</span><span>注册</span></div>
      </div>
    </van-form>
    </div>
  </div>
</template>
<script>
import {postJSON} from '../utils/request'
export default {
  setup() {
    
  },
  data(){
    return {
      form:{}
    }
  },
  methods:{
    loginHandler(){
      let url = "/user/login"
      postJSON(url,this.form).then(resp=>{
        let token = resp.data.token;
        localStorage.setItem('token',token);
        this.$router.push("/home/index");
      })
    },
    toRegister(){
    this.$router.push({
      path:"/register",
    })
    }
  }
}
</script>
<style lang="scss" scoped>
.login{
  // display: flex;
  height: 100%;
  flex-direction: column;
  background-size: 100%;
  background-image:url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201812%2F12%2F20181212164456_ju4Tv.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637815759&t=4f9e0f661e59d8c61f788ce547507d9c");
  // padding-top: 200px;
.bg{
  // background-color: rgb(56, 207, 77);
  padding-top: 100px;
  // padding-bottom: 100px;
     .hh{
    font-size: 30px;
    text-align: center;
    font-weight: 700;
  margin: 30px;
   text-shadow: 1px 1px 2px #fff;
  }

}
.bg span{
  display: inline-block;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
  font-size: 16px;
   text-shadow: 1px 1px 1px rgb(255, 255, 255);
}
}
</style>

